<template>
  <!-- 我们的荣誉 -->
  <div class="honor">
    <!-- <img class="honor_bg" src="@/assets/images/honor_bg.png" alt="荣誉" /> -->
    <!-- 组件标题 -->
    <div class="title">
      <div class="text">私たちの名誉</div>
      <!-- <p>私たちの名誉は、卓越した専門家の優位性と優れた顧客サービス能力にあります</p> -->
    </div>

    <div class="honor_list">
      <swiper ref="swiper1" :options="swiperOption3">
        <swiper-slide class="swiper-slide" v-for="(item,index) in honor_list" :key="index">
          <router-link class="honor_item" :to="{name:'jap_honor_details',query:{id:item.id}}">
            <div style="max-width:100%">
              <div class="imgBox" :style="{backgroundImage:'url('+ item.image + ')'}"></div>
              <!-- <img :src="item.image" alt /> -->
              <p>{{item.title}}</p>
            </div>
          </router-link>
        </swiper-slide>
      </swiper>
      <!-- 箭头左 -->
      <div id="swiper-button-prev3" class="swiper-button-prev prev" slot="button-prev"></div>
      <!-- 箭头右 -->
      <div id="swiper-button-next3" class="swiper-button-next next" slot="button-next"></div>
    </div>
    <div class="honor_time">
      <swiper ref="swiper2" :options="swiperOption4">
        <swiper-slide class="swiper-slide" v-for="(item,index) in honor_year" :key="index">
          <div class="honor_item" @click="onHonorTimeSlide(index)">
            <img
              v-if="index!=honor_year.length-1"
              class="honor_item_img"
              src="@/assets/images/time_hui_ban.png"
              alt
            />
            <img v-else class="honor_item_img" src="@/assets/images/time_hui_quan.png" alt />
            <p>{{item}}</p>

            <div v-if="time_slide==index" class="round"></div>
          </div>
        </swiper-slide>
      </swiper>
      <!-- 箭头左 -->
      <div id="swiper-button-prev4" class="swiper-button-prev prev" slot="button-prev"></div>
      <!-- 箭头右 -->
      <div id="swiper-button-next4" class="swiper-button-next next" slot="button-next"></div>
    </div>
    <router-link class="more" :to="{name:'jap_honor'}">
      <span>もっと</span>
      <!-- 箭头背景 -->
      <i></i>
    </router-link>
  </div>
</template>
<script>
import { honor_list, honor_visit } from "@/api/about.js";
export default {
  data() {
    return {
      honor_time: 12,
      honor_year: [], //协力荣誉时间轴
      time_slide: 0, //协力荣誉时间轴当前项
      honor_list: [], //协力荣誉列表
      swiperOption4: {
        slidesPerView: 'auto',
        spaceBetween: 0,
        //设置点击箭头
        navigation: {
          nextEl: "#swiper-button-next4",
          prevEl: "#swiper-button-prev4",
        },
        //鼠标变成抓手型
        grabCursor: true,
      },

      //我们的荣誉滑块视图
      swiperOption3: {
        // slidesPerView: 4,
        slidesPerView:'auto',
        spaceBetween: 15,
        //设置点击箭头
        navigation: {
          nextEl: "#swiper-button-next3",
          prevEl: "#swiper-button-prev3",
        },
        //鼠标变成抓手型
        grabCursor: true,
        on: {
          onSlideChangeEnd: function (swiper) {
            swiper.update();
            swiper.startAutoplay();
            swiper.reLoop();
          },
        },
      },
    };
  },
  mounted() {
    //获取协力荣誉
    this.getHonor_list(1);
  },
  methods: {
    //点击协力荣誉时间轴
    onHonorTimeSlide(index) {
      this.time_slide_change = this.time_slide; //备份一个索引 如果后续没有结果则重置当前选中的时间段
      this.time_slide = index;
      this.getHonor_list(1, 10, this.honor_year[index]);
    },

    //点击单个协力荣誉列表
    onHonorListSlide(index) {},
    //协力荣誉列表
    getHonor_list(page, limit = 10, year) {
      honor_list({ page, limit, year }).then((res) => {
        if (res.data.data.length < 1) {
          this.time_slide = this.time_slide_change;
          return this.$message({
            message: "一時的にデータなし",
            type: "warning",
          });
        }
        this.honor_list = res.data.data;
        this.honor_year = res.data.year;
      });
    },
  },
};
</script>
<style scoped src="./sass/home.css"></style>